<template>
  <div class="box">
    <el-row class="h-tatil">
      <el-col :span="24"><div>数据汇总</div></el-col>
    </el-row>
    <el-row class="border-bottom">
      <el-col :span="24"><div></div></el-col>
    </el-row>
    <el-row class="taday-data">
      <el-col :span="24"><div>昨日数据</div></el-col>
    </el-row>
    <el-row class="taday-data-detail" type="flex" justify="left">
      <el-col :span="4"><div><span class="sp">注册数</span><span>{{getAdminData.yRegisterCount}}</span></div></el-col>
      <el-col :span="4"><div><span class="sp">身份认证数</span><span>{{getAdminData.yIdAuthCount}}</span></div></el-col>

    </el-row>
    <el-row class="taday-data">
      <el-col :span="24"><div>今日数据</div></el-col>
    </el-row>
    <el-row class="taday-data-detail" type="flex" justify="center">
      <el-col :span="4"><div><span class="sp">注册数</span><span>{{getAdminData.tRegisterCount}}</span></div></el-col>
      <el-col :span="4"><div><span class="sp">身份认证数</span><span>{{getAdminData.tIdAuthCount}}</span></div></el-col>
      <el-col :span="4"><div><span class="sp">借款申请数</span><span>{{getAdminData.tApplyCount}}</span></div></el-col>
      <el-col :span="4"><div><span class="sp">通过次数</span><span>{{getAdminData. tPassCount}}</span></div></el-col>
      <el-col :span="4"><div><span class="sp">通过率</span><span>{{getAdminData.tPassRate}}</span></div></el-col>
      <el-col :span="4"><div><span class="sp">放款量</span><span>{{getAdminData.tLoanCount}}</span></div></el-col>
      <el-col :span="4"><div><span class="sp">还款量</span><span>{{getAdminData.tRepayCount}}</span></div></el-col>
    </el-row>
    <el-row class="taday-data" type="flex" justify="center">
      <el-col :span="24"><div>累计数据</div></el-col>
    </el-row>
    <el-row class="total-data bg" type="flex" justify="center">
      <el-col :span="4"><div><span class="sp">注册数</span><span>{{getAdminData.clientTotal}}</span></div></el-col>
      <el-col :span="4"><div><span class="sp">身份认证数</span><span>{{getAdminData.idAuthTotal}}</span></div></el-col>
      <el-col :span="8"><div><span class="sp">放款总金额</span><span>￥{{getAdminData.lAmountTotal | famt}}</span></div></el-col>
      <el-col :span="8"><div><span class="sp">待还款总金额</span><span>￥{{getAdminData.rAmountTotal | famt}}</span></div></el-col>
      <el-col :span="8"><div><span class="sp">逾期未还款总金额</span><span>￥{{getAdminData.oAmountTotal | famt}}</span></div></el-col>
    </el-row>
    <el-row class="taday-data" type="flex" justify="center">
      <el-col :span="24"><div>待办事项</div></el-col>
    </el-row>
    <el-row :gutter="40" class="total-data todo-br">
      <el-col :span="6"><div class="todo-bg"><span class="sp">待放款订单</span><span>{{getAdminData.wLoanCount}}</span></div></el-col>
      <el-col :span="6"><div class="todo-bg"><span class="sp">待审批订单</span><span>{{getAdminData.wCheckCount}}</span></div></el-col>
    </el-row>
    <el-row class="footer-bar">
      <el-col :span="24"><div><span class="sp-f">随意钱包服务端</span><span class="sp-y">2017</span><span>沪ICP备16024748号</span></div></el-col>
    </el-row>
  </div>
</template>

<script type="text/ecmascript-6">
  import {post} from '@/utils/http'
  export default {
    data() {
      return {
        getAdminMsg: [],
        getAdminData: [],
        beforeLoginDate:''
      }
    },
    methods: {
      /*账户基本信息*/
      getUsersMsg() {
        this.listLoading = true;
        let _this = this;
        post('/api/manager/v1/user/loginFind',{}).then((response) => {
          this.getAdminMsg = response.data;
          this.beforeLoginDate = this.currentTime(this.getAdminMsg.beforeLoginDate)
          this.listLoading = false;
        })
      },
      getUsersData() {
        this.listLoading = true;
        let _this = this;
        post('/api/manager/v1/user/statisticalInformation',{}).then((response) => {
          this.getAdminData = response.data;
          this.listLoading = false;
        })
      },
      //时间戳转化
      currentTime(uData) {
        let mydate = new Date(uData*1000);
        let str = "" + mydate.getFullYear() + "/";
        str += (mydate.getMonth()+1) + "/";
        str += mydate.getDate() + " ";
        str += mydate.getHours() + ": ";
        str += mydate.getMinutes() + ": ";
        str += mydate.getSeconds();
        return str
      },
    },
    filters: {
      famt: function (num) {
        if (!num) return ''
        let sign = '';
        let cents = '';
        num = num.toString().replace(/\$|\,/g,'');
        if(isNaN(num))
          num = "0";
        sign = (num == (num = Math.abs(num)));
        num = Math.floor(num*100+0.50000000001);
        cents = num%100;
        num = Math.floor(num/100).toString();
        if(cents<10)
          cents = "0" + cents;
        for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
          num = num.substring(0,num.length-(4*i+3))+','+
            num.substring(num.length-(4*i+3));
        return (((sign)?'':'-') + num + '.' + cents);
      }
    },
    mounted() {
      this.getUsersMsg();
      this.getUsersData();
    }
  }
</script>

<style lang='scss' scoped>
  .box{
    width: 80%;
    margin-left: 10%;
  }
  .my-news{
    .el-col{
      height: 45px;
      padding-left: 30px;
      font-size: 20px;
      line-height: 45px;
      background-color: #66BFBF;
      border-radius: 4px;
    }
  }
  .h-tatil{
    margin-top: 10px;
    margin-bottom: 25px;
    .el-col{
      height: 100%;
      font-size: 22px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .fullname{
    .el-col-8{
      border-right: 2px solid #66BFBF;
    }
    .el-col{
      height: 45px;
      line-height: 45px;
      .m-l5{
        margin-left: 20px;
      }
    }
  }
  .border-bottom{
    .el-col{
      height: 2px;
      background-color: #66BFBF;
      border-radius: 4px;
    }
  }
  .taday-data{
    height: 50px;
    padding-left: 30px;
    font-size: 20px;
    line-height: 50px;

  }
  .taday-data-detail{
    /*background-color: #66BFBF;*/
    height: 100px;
    padding-top: 10px;
    padding-bottom: 10px;
    .el-col{
      background-color: #ffffff;
      text-align: center;
      margin-left: 15px;
      padding-top: 15px;
      border: 1px solid #66BFBF;
      border-radius: 4px;
      .sp{
        display: block;
        margin-bottom: 15px;
      }
    }
  }
  .total-data{
    height: 100px;
    .el-col{
      text-align: center;
      margin-left: 15px;
      padding-top: 15px;
      .sp{
        display: block;
        margin-bottom: 15px;
      }
    }
  }
  .bg{
    padding-top: 10px;
    padding-bottom: 10px;
    &>div {
      border: 1px solid #66BFBF;
    }
  }
  .todo-bg{
    border: 1px solid #66BFBF;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .todo-br{
    border-radius: 4px;
  }
  .footer-bar{
    margin-top: 30px;
    .el-col{
      div{
        display: flex;
        justify-content: center;
        .sp-f{
          color: blue;
        }
        .sp-y{
          margin: 0 30px;
        }
      }
    }
  }
</style>
